<template>
  <div class="lb-container">
    <div class="box-header">灾情分析</div>
    <div class="box-content">
      <div class="bc-top">
        <div class="bct-item" v-for="(item, index) in typeList" :key="index">
          <span class="text-value">{{ item.value }}</span>
          <span class="text-label">{{ item.label }}</span>
        </div>
      </div>
      <div class="bc-center">
        <div id="lbbcc-chart"></div>
      </div>
      <div class="bc-bottom">
        <div id="lbbcb-chart"></div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { barlineChart, barsChart } from '@/utils/charts.js'
import { onMounted } from 'vue'
const typeList = [
  {
    label: '取马蜂窝',
    value: '4324'
  },
  {
    label: '救灾抢险',
    value: '3345'
  },
  {
    label: '社会救援',
    value: '2354'
  },
  {
    label: '火灾',
    value: '103'
  }
]
onMounted(() => {
  barlineChart('lbbcc-chart')
  barsChart('lbbcb-chart')
})
</script>
<style scoped lang="scss">
.lb-container {
  width: vw(490);
  height: vh(490);
  position: absolute;
  top: vh(580);
  left: vw(10);
  z-index: 2;
  background: url('@/assets/images/partboxbg.png');
  background-size: 100% 100%;
  color: #fff;
}
.box-header {
  height: vh(40);
  text-indent: vw(40);
  letter-spacing: 1ch;
  font-size: vw(19);
  font-weight: 600;
  line-height: vh(40);
}
.box-content {
  height: vh(450);
  padding: vh(10);
}
.bc-top {
  height: vh(80);
  margin-top: vh(10);
  display: flex;
  justify-content: space-between;
  .bct-item {
    width: vw(150);
    height: vh(67);
    background: url('@/assets/images/lbt-bg.png');
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .text-value {
      font-size: vw(23);
      font-weight: 700;
      padding: 0;
    }
    .text-label {
      font-size: vw(13);
    }
  }
}
.bc-center {
  height: vh(161);
  margin: vh(9) 0;
  padding: 0 10px;
  background: url('@/assets/images/areaboxbg.png');
  background-size: 100% 100%;
  #lbbcc-chart {
    width: 100%;
    height: 100%;
  }
}
.bc-bottom {
  height: vh(161);
  background: url('@/assets/images/areaboxbg.png');
  background-size: 100% 100%;
  padding: 0 10px;
  #lbbcb-chart {
    width: 100%;
    height: 100%;
  }
}
</style>
